import { useEffect, useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';

export default function Message() {
    const [messages] = useState([
        {
            id: '001',
            title: 'message001',
            message: 'Demo_message_001'
        },
        {
            id: '002',
            title: 'message002',
            message: 'Demo_message_002'
        },
        {
            id: '003',
            title: 'message003',
            message: 'Demo_message_003'
        }
    ]);

    const navigate = useNavigate()

    const openDeatil = (message) => 
         navigate("detail", {
            replace: false,
            state: {
                id: message.id,
                title: message.title,
                message: message.message
            }
        });
    ;

    return (
        <div>
            <ul>
                {messages.map(message => (
                    <li key={message.id}>
                        {message.title} <button onClick={() => openDeatil(message)}>Click here for details</button>
                    </li>
                ))}
            </ul>
            <Outlet />
        </div>
    );
}
